<script>
import { h } from 'vue';


export default {
    props: {
        msg: String
    },
    // 记得传入props参数
    setup(props) {
        // 定义一个自定义 h渲染函数
        const renderContent = () => {
            return h('div', [
                h('h3', 'SonDemo4'),
                h('h3', '通过 vue 的h函数自定义渲染: ' + props.msg),
                h('p', '该内容使用 h函数进行渲染'),
                h('button', { onClick: () => alert('点击按钮！') }, '点我')
            ])
        }
        // 返回自定义函数作为自定义渲染函数的内容
        return {
            renderContent
        }
    },


    //什么是 render函数:用于编程式地创建组件虚拟 DOM 树的函数。
    // 自定义渲染函数
    render() {
        return this.renderContent()
    }
}

</script>

<style lang="scss" scoped>
div {
    border: 3px solid plum;
    padding: 10px;
    margin: 10px;
}

button {
    padding: 3px 6px;
    background-color: #ddd;
    border-radius: 3px;
}
</style>